<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dojo Tooltip Widget Test</title>

	<style type="text/css">
		@import "../themes/claro/document.css";
		@import "css/dijitTests.css";

		#instructionTable.td { padding: 20px; }
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dojo.parser");

		dojo.require("dijit.Tooltip");
		dojo.require("dijit.ColorPalette");
		dojo.require("dijit.form.DateTextBox");

		dojo.require("dijit.form.DropDownButton");
		dojo.require("dijit.DropDownMenu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.TitlePane");

		dojo.ready(function(){
			console.log("on load func");
			var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
			console.log("created", tt, tt.id);

			dojo.connect(dijit.byId("t_tooltip"),"onShow",function(t, p){
				console.log("Dynamic target tooltip onShow", t, p);//To check correct order in event call
				if(!p || !p.length){ p = dijit.Tooltip.defaultPosition; }
				dojo.byId("t_shown").innerHTML = "Tooltip shown for node " + t.id + " at position " + p;
			});
			dojo.connect(dijit.byId("t_tooltip"),"onHide",function(){
				console.log("Dynamic target tooltip onHide");//To check correct order in event call
				dojo.byId("t_shown").innerHTML = "Tooltip hidden";
			});
			updateDynamicIds();
		});

		function updateDynamicIds(){
			dojo.byId("t_connected_id").innerHTML = "Tooltip connected with nodes: " + dijit.byId("t_tooltip").get("connectId");
		}
		function addDynamicTarget(id){
			dijit.byId("t_tooltip").addTarget(id);
			updateDynamicIds();
		}
		function removeDynamicTarget(id){
			dijit.byId("t_tooltip").removeTarget(id);
			updateDynamicIds();
		}

		function setDefaultAlign(array){
			dijit.Tooltip.defaultPosition = array;
			dojo.byId('current').innerHTML = "Current: " + array;
		}
	</script>
</head>
<body class="claro">

	<h1 class="testTitle">Tooltip test</h1>

	<p>Mouse-over or focus the items below to test tooltips.</p>
	<table id="instructionTable">
		<tr>
			<td>
				Change tooltip positioning search list:
			</td>
			<td>
				Set background color:
			</td>
			<td>
				Prompt message test (for quirks mode):
			</td>
		</tr>
		<tr>
			<td>
				<button onclick="setDefaultAlign(['above-centered', 'below-centered']);">above-centered, below-centered</button>
				<button onclick="setDefaultAlign(['after-centered', 'before-centered']);">after-centered, before-centered</button>
				<button onclick="setDefaultAlign(['above', 'below']);">above, below</button>
				<!-- unsupported (and currently broken)
				<button onclick="setDefaultAlign(['after', 'before']);">after, before</button>
				-->
				<div id=current>
					Current: default (unchanged)
				</div>
			</td>
			<td>
				<div data-dojo-type="dijit/ColorPalette" data-dojo-props='onChange:function(val){ dojo.query("body").style("background", val); }'></div>
			</td>
			<td>
				<input data-dojo-type="dijit/form/DateTextBox" data-dojo-props='id: "dtb", value: "2010-12-15", promptMessage: "Please Enter a date in dd/MM/yyyy format", style:"width: 8em;"'>
			</td>
		</tr>
	</table>

	<label for="ddb">Drop down menu items have tooltips:</label>
	<button id="ddb" data-dojo-type="dijit/form/DropDownButton">
		<span>DropDown</span>
		<span id="ddm" data-dojo-type="dijit/DropDownMenu">
			<span id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
				onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
			<span id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
				onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
			<span id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
				onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
		</span>
	</button>
	<span id="cut_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["cut"]'>tooltip for cut</span>
	<span id="copy_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["copy"]'>tooltip for copy</span>
	<span id="paste_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["paste"]'>tooltip for paste</span>

	<div id="tp2" dojoType="dijit.TitlePane" title="Tooltip on span in TitlePane" style="width: 300px;">
		<span id="tpTooltipTarget">hover me for tooltip</span>
		<span dojoType="dijit.Tooltip" connectId="tpTooltipTarget">tooltip on TitlePane span</span>
	</div>

	<input value="input, no tooltip"/>
	<div>
		<span id="one" class="tt" tabindex="0"> focusable text </span>
		<span id="one_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one"]'>
			<b>
				<span style="color: blue;">rich formatting</span>
				<span style="color: red; font-size: x-large;"><i>!</i></span>
			</b>
		</span>
	</div>
	<span id="oneA" class="tt"> plain text (not focusable) </span>
	<span id="oneA_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["oneA"]'>
		<span> keyboard users can not access this tooltip</span>
	</span>
    <a id="three" href="#bogus">anchor</a>
	<span id="three_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["three"]'>tooltip on a link </span>
	<p></p>

	<span id="programmaticTest">this text has a programmatically created tooltip</span>
	<br>

	<button id="four">button w/tooltip</button>
	<span id="btnTt" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["four"]'>tooltip on a button</span>
	<button id="removeButton" onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip".

	<span style="float: right">
		Test tooltip on right aligned element.  Tooltip should flow to the left --&gt;
		<select id="seven">
			<option value="alpha">Alpha</option>
			<option value="beta">Beta</option>
			<option value="gamma">Gamma</option>
			<option value="delta">Delta</option>
		</select>

		<span id="seven_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["seven"]'>
			tooltip on a select<br>
			two line tooltip.
		</span>
	</span>

	<p></p>

	<form>
		<input id="id1" value="#1"/><br>
		<input id="id2" value="#2"/><br>
		<input id="id3" value="#3"/><br>
		<input id="id4" value="#4"/><br>
   		<input id="id5" value="#5"/><br>
		<input id="id6" value="#6"/><br>
	</form>
	<br>

	<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
		<span id="s1">s1 text</span><br><br><br>
		<span id="s2">s2 text</span><br><br><br>
		<span id="s3">s3 text</span><br><br><br>
		<span id="s4">s4 text</span><br><br><br>
		<span id="s5">s5 text</span><br><br><br>
	</div>

	<span id="id1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id1"]'>

	tooltip for #1<br>
	long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text<br>
	make sure that this works properly with a really narrow window
	</span>

	<span id="id2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id2"]'>tooltip for #2</span>
	<span id="id3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id3"]'>tooltip for #3</span>
	<span id="id4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id4"]'>tooltip for #4</span>
	<span id="id5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id5"]'>tooltip for #5</span>
	<span id="id6_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id6"]'>tooltip for #6</span>

	<span id="s1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s1"]'>s1 tooltip</span>
	<span id="s2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s2"]'>s2 tooltip</span>
	<span id="s3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s3"]'>s3 tooltip</span>
	<span id="s4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s4"]'>s4 tooltip</span>
	<span id="s5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s5"]'>s5 tooltip</span>

	<h3>One Tooltip for multiple connect nodes</h3>
	<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["multi1","multi2"], id:"multi1,multi2_tooltip", style:"display:none;"'>multi tooltip</span>
	<a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>

	<h3>One Tooltip for multiple connect nodes w/ dojoType</h3>
	<span dojoType="dijit.Tooltip" connectId="oldmulti1, oldmulti2" id="oldmulti1,oldmulti2_tooltip" style="display:none">multi tooltip dojoType</span>
	<a id="oldmulti1" href="#bogus">multi1</a><br><a id="oldmulti2" href="#bogus">multi2</a>


	<h3>Dynamic target tooltip</h3>
	<div>
		<button onclick="addDynamicTarget('t1');">Add</button>
		<button onclick="removeDynamicTarget('t1');">Remove</button>
		<span id="t1" tabIndex="0">t1 text</span><br>
		<button onclick="addDynamicTarget('t2');">Add</button>
		<button onclick="removeDynamicTarget('t2');">Remove</button>
		<span id="t2" tabIndex="0">t2 text</span><br>
		<button onclick="addDynamicTarget('t3');">Add</button>
		<button onclick="removeDynamicTarget('t3');">Remove</button>
		<span id="t3" tabIndex="0">t3 text</span><br>
		<button onclick="addDynamicTarget('t4');">Add</button>
		<button onclick="removeDynamicTarget('t4');">Remove</button>
		<span id="t4" tabIndex="0">t4 text</span><br>
		<button onclick="addDynamicTarget('t5');">Add</button>
		<button onclick="removeDynamicTarget('t5');">Remove</button>
		<span id="t5" tabIndex="0">t5 text</span><br>
	</div>
	<span id="t_connected_id"></span><br>
	<span id="t_shown">Tooltip hidden (initial)</span>

	<span id="t_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["t1","t3"]'>Dynamic target tooltip</span>

	<h3>Nested div test:</h3>
	<div dir="ltr" style="margin: 0px 100px;">
		<input id="inputBeforeNested" value="before">
		<div id="nested" style="width: 300px;background-color: yellow">
			Mouse over the inner blue div should show the tooltip on this outer yellow div.
			<div style="width: 100px; height: 100px; background-color: blue; color: white;">
				inner blue div
			</div>
			Likewise, focusing the input should put the tooltip on the outer yellow div
			<br>
			<input id="nestedInput" value="focus me">
		</div>
		<span id="nested_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:"nested"'>
			Tooltip on yellow outer div
		</span>
	</div>

	<h3>Delegation test:</h3>
	<p>Tooltip should appear for first three rows of the table, customized per row.</p>
	<span id="delegation_tooltip" data-dojo-type="dijit/Tooltip"
		  data-dojo-props='connectId:"myTable", selector: "tr"'>
		<script type="dojo/method" data-dojo-event="getContent" data-dojo-args="node">
			var row = node.getAttribute("row");
			return row <= 3 ? ("Tooltip for row " + row) : null;
		</script>
		This text will never appear; instead getContent() will run.
	</span>
	<table id="myTable">
		<tr id="myTable-row1" row=1><td>row</td><td>1</td></tr>
		<tr id="myTable-row2" row=2><td>row</td><td>2</td></tr>
		<tr id="myTable-row3" row=3><td>row</td><td>3</td></tr>
		<tr id="myTable-row4" row=4><td>row</td><td>4</td></tr>
		<tr id="myTable-row5" row=5><td>row</td><td>5</td></tr>
	</table>

</body>
</html>
